<template>
  <div class="area-container">
    <p class="area-title">
      <span>
        服务调用排行
      </span>

      <el-date-picker
        v-model="value"
        size="small"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd HH:mm:ss"
        @change="getServiceCallNumRanking"
      />
    </p>

    <!-- 饼状图 -->
    <div class="area-chart-container">
      <div ref="leftBottom" />
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '@/framework/utils/mixins/resize'
import { getServiceCallNumRankingApi } from '@/api/index'
import _ from 'lodash'
export default {
  name: 'InterfacePlatformIndex',
  mixins: [resize],
  data() {
    return {
      projectList: [],
      value: [],
      chart: null
    }
  },

  mounted () {
    this.getServiceCallNumRanking()
  },

  methods: {
    initChart (data) {
      if (this.chart) this.chart.clear()
      this.chart = echarts.init(this.$refs.leftBottom, 'macarons')
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '1%',
          right: '1%',
          bottom: '3%',
          top: '5%',
          containLabel: true
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          data: data[0],
          axisLabel: {
            formatter: function(value) {
              // 这里可以根据需要截断或者显示省略号
              return value.length > 15 ? value.substring(0, 15) + '...' : value
            }
          }
        },
        series: [
          {
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: data[1]
          }
        ]
      }
      this.chart.setOption(option)
    },

    getServiceCallNumRanking () {
      getServiceCallNumRankingApi({
        startDate: this.value ? this.value[0] : '',
        endDate: this.value ? this.value[1] : ''
      }).then(({ code, data }) => {
        if (code === '00000') {
          this.initChart([_.map(data, 'serviceName'), _.map(data, 'count')])
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.area-chart-container {
  height: calc(100% - 50px);
  & > div {
    height: 100%;
  }
}
</style>
